// https://v2.vuepress.vuejs.org/zh/reference/default-theme/styles.html#style-%E6%96%87%E4%BB%B6

:root {
    // brand colors
    --c-brand: #0A59F7;
    --c-brand-light: #0A59F7;
  
    // background colors
    --c-bg: #ffffff;
    --c-bg-light: #f3f4f5;
    --c-bg-lighter: #eeeeee;
    --c-bg-navbar: var(--c-bg);
    --c-bg-sidebar: var(--c-bg);
    --c-bg-arrow: #cccccc;
    
    // text colors
    --c-text: #2c3e50;
    --c-text-accent: var(--c-brand);
    --c-text-light: #3a5169;
    --c-text-lighter: #4e6e8e;
    --c-text-lightest: #6a8bad;
    --c-text-quote: #999999;
  
    // border colors
    --c-border: #eaecef;
    --c-border-dark: #dfe2e5;
  
    // custom container colors
    --c-tip: #42b983;
    // --c-tip: #0A59F7;
    --c-tip-bg: var(--c-bg);
    --c-tip-title: var(--c-text);
    --c-tip-text: var(--c-text);
    --c-tip-text-accent: var(--c-text-accent);
    --c-warning: #e7c000;
    --c-warning-bg: #fffae3;
    --c-warning-title: #ad9000;
    --c-warning-text: #746000;
    --c-warning-text-accent: var(--c-text);
    --c-danger: #cc0000;
    --c-danger-bg: #ffe0e0;
    --c-danger-title: #990000;
    --c-danger-text: #660000;
    --c-danger-text-accent: var(--c-text);
    --c-details-bg: #eeeeee;
  
    // badge component colors
    --c-badge-tip: var(--c-tip);
    --c-badge-warning: var(--c-warning);
    --c-badge-danger: var(--c-danger);
  
    // transition vars
    --t-color: 0.3s ease;
    --t-transform: 0.3s ease;
  
    // code blocks vars
    // --code-bg-color: #282c34;
    // --code-hl-bg-color: rgba(0, 0, 0, 0.66);
    --code-ln-color: #9e9e9e;
    --code-ln-wrapper-width: 3.5rem;
    // --code-bg-color: #F6F8FA;
    --code-bg-color: #F5F5F5;
    // --code-hl-bg-color: rgba(0, 0, 0, 0.66);
    --code-hl-bg-color: #f0f0f9;
  
    // font vars
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    --font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  
    // layout vars
    --navbar-height: 3.6rem;
    --navbar-padding-v: 0.7rem;
    --navbar-padding-h: 1.5rem;
    --sidebar-width: 20rem;  // sidebar 宽度
    --sidebar-width-mobile: calc(var(--sidebar-width) * 0.82);
    --content-width: 740px;
    --homepage-width: 960px;
  }

  // plugin-back-to-top
  .back-to-top {
    --back-to-top-color: var(--c-brand);
    --back-to-top-color-hover: var(--c-brand-light);
  }
  
  // plugin-docsearch
  .DocSearch {
    --docsearch-primary-color: var(--c-brand);
    --docsearch-text-color: var(--c-text);
    --docsearch-highlight-color: var(--c-brand);
    --docsearch-muted-color: var(--c-text-quote);
    --docsearch-container-background: rgba(9, 10, 17, 0.8);
    --docsearch-modal-background: var(--c-bg-light);
    --docsearch-searchbox-background: var(--c-bg-lighter);
    --docsearch-searchbox-focus-background: var(--c-bg);
    --docsearch-searchbox-shadow: inset 0 0 0 2px var(--c-brand);
    --docsearch-hit-color: var(--c-text-light);
    --docsearch-hit-active-color: var(--c-bg);
    --docsearch-hit-background: var(--c-bg);
    --docsearch-hit-shadow: 0 1px 3px 0 var(--c-border-dark);
    --docsearch-footer-background: var(--c-bg);
  }
  
  // plugin-external-link-icon
  .external-link-icon {
    --external-link-icon-color: var(--c-text-quote);
  }
  
  // plugin-medium-zoom
  .medium-zoom-overlay {
    --medium-zoom-bg-color: var(--c-bg);
  }
  
  // plugin-nprogress
  #nprogress {
    --nprogress-color: var(--c-brand);
  }
  
  // plugin-pwa-popup
  .pwa-popup {
    --pwa-popup-text-color: var(--c-text);
    --pwa-popup-bg-color: var(--c-bg);
    --pwa-popup-border-color: var(--c-brand);
    --pwa-popup-shadow: 0 4px 16px var(--c-brand);
    --pwa-popup-btn-text-color: var(--c-bg);
    --pwa-popup-btn-bg-color: var(--c-brand);
    --pwa-popup-btn-hover-bg-color: var(--c-brand-light);
  }
  
  // plugin-search
  .search-box {
    --search-bg-color: var(--c-bg);
    --search-accent-color: var(--c-brand);
    --search-text-color: var(--c-text);
    --search-border-color: var(--c-border);
  
    --search-item-text-color: var(--c-text-lighter);
    --search-item-focus-bg-color: var(--c-bg-light);
  }


//  ------------------------------- 样式覆盖 -------------------------------

// 内容区宽度
.theme-default-content:not(.custom),
.page-meta,
.page-nav {
  max-width: 80%;
  width: 65rem;
}

.navbar .logo {
  margin-right: 20px;
}


// 侧边栏字体样式
.sidebar-item.sidebar-heading {
  font-weight: 500;
  font-size: 14px;
}

.sidebar-item:not(.sidebar-heading) {
  font-size: 14px;
}

// 侧边栏 hover 时的效果
.sidebar-item.sidebar-heading.collapsible:hover {
  background-color: rgba(31,35,41,.05);
}

a.sidebar-item:hover {
  background-color: rgba(31,35,41,.05);
}

.sidebar-item.active:not(p.sidebar-heading) {
  border-right-color: 1px soild var(--c-text-accent);
}

.sidebar-item {
  border-left: none;
  border-right: 2px solid transparent;;
}

.sidebar-item.sidebar-heading.collapsible + .sidebar-item-children {
  margin-bottom: 0;
}


// 菜单展开前与展开后的 icon
.sidebar-item.sidebar-heading .arrow {
  vertical-align: middle;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='18' height='18' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='48' height='48' fill='white' fill-opacity='0.01'/%3E%3Cpath d='M13 30L25 18L37 30' stroke='%23adbac7' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  line-height: 18px;
  transition: transform 0.25s ease-in-out 0s, opacity 0.25s ease-in-out 0s;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  float: right;
}

.sidebar-heading .arrow.right {
  transform: rotate(90deg);
}

.sidebar-heading .arrow.down {
  transform: rotate(180deg);
}

.arrow.down {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='18' height='18' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='48' height='48' fill='white' fill-opacity='0.01'/%3E%3Cpath d='M37 18L25 30L13 18' stroke='%23adbac7' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  line-height: 18px;
  transition: transform 0.25s ease-in-out 0s, opacity 0.25s ease-in-out 0s;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
}

.navbar-dropdown-wrapper:hover .arrow {
  transform: rotate(-180deg);
}


// 手机端菜单展开 icon 
.navbar-dropdown-wrapper .navbar-dropdown-title-mobile .arrow {
  vertical-align: middle;
  width: 18px;
  height: 18px;
  line-height: 18px;
  background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='18' height='18' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='48' height='48' fill='white' fill-opacity='0.01'/%3E%3Cpath d='M13 30L25 18L37 30' stroke='%23adbac7' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: transform 0.25s ease-in-out 0s, opacity 0.25s ease-in-out 0s;
  margin-top: 2px;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
}


.navbar-dropdown-wrapper .navbar-dropdown-title-mobile .arrow.down {
  transform: rotate(180deg);
}

.navbar-dropdown-wrapper .navbar-dropdown-title-mobile .arrow.right {
  transform: rotate(90deg);
}


// 取消 sidebar margin-bottom
.sidebar-items  .sidebar-item-children  li {
  margin-bottom: 0;
}


/*取消 sidebar 滚动条*/
.sidebar::-webkit-scrollbar {
  width: 0 !important;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: transparent  !important;
}

.sidebar::-webkit-scrollbar-thumb:hover {
  background-color: transparent !important;
}

.sidebar::-webkit-scrollbar-track {
  background-color: transparent !important;
}
// 火狐浏览器取消 sidebar 滚动条颜色
* {
  scroll-behavior: auto !important;
  scrollbar-color: #ffffff #ffffff !important;
}


// sidebar 文字超过部分用省略号代替
.sidebar-item:not(.sidebar-heading) {
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}

// 右侧悬浮 toc
.right-anchor {
  --rightAnchorTextColor: #0A59F7;
  --rightAnchorFontSize: 12px;
  --rightAnchorBtnTextColor: var(--rightAnchorTextColor);
  --rightAnchorBtnBgColor: #fff;
  --rightAnchorMenuTextColor: rgba(58,81,105,.7);
  --rightAnchorMenuBgColor: #fff;
}

.right-anchor-menu-item.h2,
.right-anchor-menu-item.h3,
.right-anchor-menu-item.h4,
.right-anchor-menu-item.h5 {
  font-weight: 600  !important;
}

.right-anchor-button {
  display: none;
}


// 文字颜色
.forange {
  color: rgb(222, 120, 2);
}

.fred {
  color: rgb(216, 57, 49);
}

.fgray {
  color: rgb(143, 149, 158);
}

.fgreen {
  color: rgb(46, 161, 33);
}

.fblue {
  color: rgb(36, 91, 219);
}

.fpurple {
  color: rgb(100, 37, 208);
}


// 带有背景的文字颜色
.bglightpink {
  background: rgb(236, 226, 254);
  font-weight: 500;
  color: rgb(100, 37, 208);
  padding: 3px;
}

.bgorange {
  background-color: rgba(254, 212, 164, 0.8);
  font-weight: 500;
  color: rgb(222, 120, 2);
  padding: 3px;
}

.bgred {
  background-color: rgb(251, 191, 188);
  font-weight: 500;
  color: rgb(216, 57, 49);
  padding: 3px;
}

.bglightgold {
  background-color: #fff3cd;
  font-weight: 500;
  color: #856404;
  padding: 3px;
}

.bglightgreen {
  background-color: rgba(183, 237, 177, 0.8);
  font-weight: 500;
  color: rgb(46, 161, 33);
  padding: 3px;
}

.bglightred {
  background-color: #f8d7da;
  font-weight: 500;
  color: #721c24;
  padding: 3px;
}

.bglightblue {
  background-color: rgba(186, 206, 253, 0.7) ;
  font-weight: 500;
  color: rgb(36, 91, 219);
  padding: 3px;
}

.bggemgreen{
  background-color: #d4edda;
  font-weight: 500;
  color: #689ba3;
  padding: 3px;
}

.bgpink {
  background-color: rgba(205, 178, 250, 0.7);
  font-weight: 500;
  color: rgb(100, 37, 208);
  padding: 3px;
}

.bgnavygreen {
  background-color: #d1ecf1;
  font-weight: 500;
  color: #35737d;
  padding: 3px;
}

.bggray {
  background-color: rgba(222, 224, 227, 0.8);
  font-weight: 500;
  color: rgb(143, 149, 158);
  padding: 3px;
}


// 高亮块
.highlight-blue {
  background-color: rgb(225, 234, 255) !important;
  display: block;
  color: rgb(36, 91, 219) !important;
  border: 1px solid rgb(130, 167, 252);
  font-weight: 500 !important;
  border-radius: 8px;
  padding: 10px 10px;
  margin: 20px 0 10px 0;
}

.highlight-orange {
  background-color: rgb(254, 234, 210) !important;
  display: block;
  color: rgb(222, 120, 2) !important;
  padding: 10px 10px;
  border: 1px solid rgb(254, 212, 164);
  font-weight: 500 !important;
  border-radius: 8px;
  margin: 20px 0 10px 0;
}

.highlight-red {
  background-color: rgb(253, 226, 226) !important;
  border: 1px solid rgb(249, 142, 139);
  color: rgb(216, 57, 49) !important;
  display: block;
  padding: 10px 10px;
  font-weight: 500 !important;
  border-radius: 8px;
  margin: 20px 0 10px 0;
}

.highlight-green {
  background-color: rgb(217, 245, 214) !important;
  border: 1px solid rgb(142, 224, 133);
  color: rgb(46, 161, 33) !important;
  display: block;
  padding: 10px 10px;
  font-weight: 500 !important;
  border-radius: 8px;
  margin: 20px 0 10px 0;
}

.highlight-purple {
  background-color: rgb(236, 226, 254) !important;
  border: 1px solid rgb(173, 130, 247);
  color: rgb(100, 37, 208) !important;
  /* color: #000 !important; */
  display: block;
  padding: 10px 10px;
  font-weight: 500 !important;
  border-radius: 8px;
  margin: 20px 0 10px 0;
}


// 引用 的样式
blockquote {
  border-left: 3px solid #0A59F7;
}


// a 标签样式
a { 
  text-decoration: none !important;
}

a:hover {
  text-decoration: none !important;
  color: rgba(10,89,247,.8);
}


// 内部连接前面添加 icon
.theme-default-content a[href^="/"]::before {
  margin-right: 4px;
  margin-left: 2px;
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg t='1626093724345' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='3856' width='200' height='200'%3E%3Cpath d='M896.5 328.5h-256c-13.3 0-24-10.7-24-24v-256c0-13.3 10.7-24 24-24s24 10.7 24 24v232h232c13.3 0 24 10.7 24 24s-10.7 24-24 24z' fill='%230A59F7' p-id='3857'%3E%3C/path%3E%3Cpath d='M896.5 1000.5h-768c-13.3 0-24-10.7-24-24v-928c0-13.3 10.7-24 24-24h512c6.4 0 12.5 2.5 17 7l256 256c4.5 4.5 7 10.6 7 17v672c0 13.3-10.7 24-24 24z m-744-48h720V314.4L630.6 72.5H152.5v880z' fill='%230A59F7' p-id='3858'%3E%3C/path%3E%3Cpath d='M704.5 792.5h-384c-13.3 0-24-10.7-24-24s10.7-24 24-24h384c13.3 0 24 10.7 24 24s-10.7 24-24 24zM704.5 632.5h-384c-13.3 0-24-10.7-24-24s10.7-24 24-24h384c13.3 0 24 10.7 24 24s-10.7 24-24 24zM704.5 472.5h-384c-13.3 0-24-10.7-24-24s10.7-24 24-24h384c13.3 0 24 10.7 24 24s-10.7 24-24 24zM448.5 312.5h-128c-13.3 0-24-10.7-24-24s10.7-24 24-24h128c13.3 0 24 10.7 24 24s-10.7 24-24 24z' fill='%230A59F7' p-id='3859'%3E%3C/path%3E%3C/svg%3E");
  background-size: 16px 16px;
  transform: translate(0, 3px);
  background-repeat: no-repeat;
  display: inline-block;
  height: 16.8px;
  width: 16.33px;
}


// 标题前面 # 的颜色
a.header-anchor {
  color: #999999;
}


// 代码块样式
.code-group__nav-tab {
  color: var(--c-text-light);
}

.theme-default-content pre code, .theme-default-content pre[class*=language-] code {
  color: var(--c-text);
}

.code-group__nav-tab-active {
  color: #0A59F7;
}


// 容器样式
.custom-container.tip,
.custom-container.warning,
.custom-container.danger {
  overflow: hidden;
  color: var(--c-text);
  background-color: #ffffff;
  border-radius: 0.2rem;
  box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.1);
  padding: 0;
  margin: 30px 0;
}

.custom-container.tip .custom-container-title,
.custom-container.warning .custom-container-title,
.custom-container.danger .custom-container-title{
  color: var(--c-text);
  margin-top: 0;
  padding: 10px 0;
  text-indent: 20px;
  font-weight: 600;
}


.custom-container.tip > .custom-container-title + ul,ol,
.custom-container.warning > .custom-container-title + ul,ol,
.custom-container.danger > .custom-container-title + ul,ol {
  padding: 10px 40px;
}

.custom-container.tip > .custom-container-title ~ p,
.custom-container.warning > .custom-container-title ~ p,
.custom-container.danger > .custom-container-title ~ p {
  padding: 5px  20px 0 20px;
}


.custom-container.tip {
  border-left: 0.2rem solid #0A59F7;
  // border-left: 0.2rem solid rgb(124, 77, 255);
}

.custom-container.tip .custom-container-title {
  background-color: rgba(10,89,247,0.1);
  // background-color: rgba(124, 77, 255,0.1);
}


.custom-container.warning {
  border-left: 0.2rem solid rgb(255,145,0);
}

.custom-container.warning .custom-container-title {
  background-color: rgba(255,145,0,0.1);
}


.custom-container.danger {
  border-left: 0.2rem solid rgb(255, 82, 82);
}

.custom-container.danger .custom-container-title {
  background-color: rgba(255, 82, 82,0.1);
}

.custom-container.tip code,
.custom-container.warning code,
.custom-container.danger code,
.custom-container.details code {
  color: #c7254e;
  background-color: unset;
  padding: 0;
}


.custom-container.tip .custom-container-title::before {
  content: '';
  background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='24' height='24' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='48' height='48' fill='white' fill-opacity='0.01'/%3E%3Cpath d='M40 20C40 26.8077 35.7484 32.6224 29.7555 34.9336H24H18.2445C12.2516 32.6224 8 26.8077 8 20C8 11.1634 15.1634 4 24 4C32.8366 4 40 11.1634 40 20Z' fill='none' stroke='%23333' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M29.7555 34.9336L29.0764 43.083C29.0332 43.6013 28.5999 44 28.0798 44H19.9201C19.4 44 18.9668 43.6013 18.9236 43.083L18.2444 34.9336' stroke='%23333' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 17V23L24 20L30 23V17' stroke='%23333' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  transform: translate(0, 3px);
  background-repeat: no-repeat;
  display: inline-block;
  height: 16.8px;
  width: 16.33px;
  margin-right: 5px;
}


.custom-container.warning .custom-container-title::before {
  content: '';
  background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='24' height='24' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='48' height='48' fill='white' fill-opacity='0.01'/%3E%3Cpath d='M24 44C29.5228 44 34.5228 41.7614 38.1421 38.1421C41.7614 34.5228 44 29.5228 44 24C44 18.4772 41.7614 13.4772 38.1421 9.85786C34.5228 6.23858 29.5228 4 24 4C18.4772 4 13.4772 6.23858 9.85786 9.85786C6.23858 13.4772 4 18.4772 4 24C4 29.5228 6.23858 34.5228 9.85786 38.1421C13.4772 41.7614 18.4772 44 24 44Z' fill='none' stroke='%23333' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24 37C25.3807 37 26.5 35.8807 26.5 34.5C26.5 33.1193 25.3807 32 24 32C22.6193 32 21.5 33.1193 21.5 34.5C21.5 35.8807 22.6193 37 24 37Z' fill='%23333'/%3E%3Cpath d='M24 12V28' stroke='%23333' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  transform: translate(0, 3px);
  background-repeat: no-repeat;
  display: inline-block;
  height: 16.8px;
  width: 16.33px;
  margin-right: 5px;
}


.custom-container.danger .custom-container-title::before {
  content: '';
  background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='24' height='24' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='48' height='48' fill='white' fill-opacity='0.01'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24 5.00018L2 43.0002H46L24 5.00018Z' fill='none' stroke='%23333' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M24 35.0002V36.0002' stroke='%23333' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M24 19.0007L24.0083 29.0002' stroke='%23333' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  transform: translate(0, 3px);
  background-repeat: no-repeat;
  display: inline-block;
  height: 16.8px;
  width: 16.33px;
  margin-right: 5px;
}


.custom-container.details code {
  background-color: transparent;
}


h1, h2, h3, h4, h5, h6 {
  border-bottom: unset;
  font-weight: 600;
}


// 大纲模式 outliner
ul ul,
ol ul,
ul ol,
ol ol {
  position: relative;
  margin: 8px 0;
  padding-inline-start: 2em
}

ul > li,
ol > li {
  margin-bottom: 8px;
}


ul > li blockquote {
  border-left: none;
  padding: 0;
}

ul ul::before,
ol ul::before,
ul ol::before,
ol ol::before,
li li::before
 {
  content:'';
  border-left: 1px solid #dee0e3;
  position: absolute;
  left: -15px;
  top: 0;
  bottom: 0;
}


// 自定义的容器分栏
.col2left {
  width: calc((100% - 30px) * 0.5);
  float: left;
  margin-right: 30px;
  box-shadow: none;
  border-left: none;
  margin: 0;
}

.col2right {
  width: calc((100% - 30px) * 0.5);
  float: right;
  box-shadow: none;
  border-left: none;
  margin: 0;
}

.col2left .custom-container-title,
.col2right .custom-container-title {
  margin-top: 0;
}

.col2left .custom-container-title {
  background-color: rgba(178,122,64,0.1);
  // border-bottom: 1px solid #F1F3F5;
  font-weight: 700;
  padding: 0.3rem 0;
}

.col2right .custom-container-title{
  // background-color: rgba(178,22,164,0.1);
  // border-bottom: 1px solid #F1F3F5;
  // background-color: rgba(178,122,64,0.1);
  background-color: rgba(99,178,129,0.1);
  font-weight: 700;
  padding: 0.3rem 0;
}


// 图片并列显示
.img-grid p {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.img-grid p img {
  margin-right: 30px;
  margin-bottom: 30px;
  max-width: calc((100% - 150px) * 0.2) !important;
  flex-shrink: 0 !important;
}

// 清除浮动
p,h1,h2,h3,h4,h5,h6,hr,ul,ol{
  clear: both;
}


// 暗黑模式下的样式
html.dark {
  --c-brand: #0A59F7;
  --c-brand-light: #0A59F7;
  --code-bg-color: #282c34;
  --code-hl-bg-color: rgba(0, 0, 0, 0.66);
  --code-ln-color: #9e9e9e;
}


html.dark .custom-container.tip,
html.dark .custom-container.warning,
html.dark .custom-container.danger,
html.dark .custom-container.details {
  background-color: rgba(255,255,255,0.04) !important;
}


html.dark ul ul::before,
html.dark ol ul::before,
html.dark ul ol::before,
html.dark ol ol::before,
html.dark li li::before{
  border-left: 1px solid #363636;
}


html.dark .custom-container.tip .custom-container-title::before {
  content: '';
  background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='24' height='24' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='48' height='48' fill='white' fill-opacity='0.01'/%3E%3Cpath d='M40 20C40 26.8077 35.7484 32.6224 29.7555 34.9336H24H18.2445C12.2516 32.6224 8 26.8077 8 20C8 11.1634 15.1634 4 24 4C32.8366 4 40 11.1634 40 20Z' fill='none' stroke='%23adbac7' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M29.7555 34.9336L29.0764 43.083C29.0332 43.6013 28.5999 44 28.0798 44H19.9201C19.4 44 18.9668 43.6013 18.9236 43.083L18.2444 34.9336' stroke='%23adbac7' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18 17V23L24 20L30 23V17' stroke='%23adbac7' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  transform: translate(0, 3px);
  background-repeat: no-repeat;
  display: inline-block;
  height: 16.8px;
  width: 16.33px;
  margin-right: 5px;
}


html.dark .custom-container.warning .custom-container-title::before {
  content: '';
  background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='24' height='24' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='48' height='48' fill='white' fill-opacity='0.01'/%3E%3Cpath d='M24 44C29.5228 44 34.5228 41.7614 38.1421 38.1421C41.7614 34.5228 44 29.5228 44 24C44 18.4772 41.7614 13.4772 38.1421 9.85786C34.5228 6.23858 29.5228 4 24 4C18.4772 4 13.4772 6.23858 9.85786 9.85786C6.23858 13.4772 4 18.4772 4 24C4 29.5228 6.23858 34.5228 9.85786 38.1421C13.4772 41.7614 18.4772 44 24 44Z' fill='none' stroke='%23adbac7' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24 37C25.3807 37 26.5 35.8807 26.5 34.5C26.5 33.1193 25.3807 32 24 32C22.6193 32 21.5 33.1193 21.5 34.5C21.5 35.8807 22.6193 37 24 37Z' fill='%23adbac7'/%3E%3Cpath d='M24 12V28' stroke='%23adbac7' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  transform: translate(0, 3px);
  background-repeat: no-repeat;
  display: inline-block;
  height: 16.8px;
  width: 16.33px;
  margin-right: 5px;
}


html.dark .custom-container.danger .custom-container-title::before {
  content: '';
  background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='24' height='24' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='48' height='48' fill='white' fill-opacity='0.01'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24 5.00018L2 43.0002H46L24 5.00018Z' fill='none' stroke='%23adbac7' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M24 35.0002V36.0002' stroke='%23adbac7' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M24 19.0007L24.0083 29.0002' stroke='%23adbac7' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  transform: translate(0, 3px);
  background-repeat: no-repeat;
  display: inline-block;
  height: 16.8px;
  width: 16.33px;
  margin-right: 5px;
}


html.dark .col2left .custom-container-title {
  border-bottom: unset;
}


// 暗黑模式下右侧悬浮大纲的样式
html.dark .right-anchor {
  --rightAnchorTextColor: var(--c-text);
  --rightAnchorFontSize: 12px;
  --rightAnchorBtnTextColor: var(--rightAnchorTextColor);
  --rightAnchorBtnBgColor: transparent;
  --rightAnchorMenuTextColor: var(--rightAnchorTextColor);
  --rightAnchorMenuBgColor: transparent;
}

html.dark .right-anchor-menu-item.h2,
html.dark .right-anchor-menu-item.h3,
html.dark .right-anchor-menu-item.h4,
html.dark .right-anchor-menu-item.h5 {
  font-weight: 600  !important;
}


// 手机端查看时
@media (max-width: 419px) {
  // 不使用分栏效果
  .col2left {
    width: 100%;
    float: unset;
  }

  .col2right {
    width: 100%;
    float: unset;
  }

  .img-grid p img {
    max-width: 100% !important;
  }
}


// iPad 查看时
@media (min-width: 600px) and  (max-width: 1200px) {
  // 显示悬浮大纲隐藏菜单
  .right-anchor-button {
    display: block;
  }

  // 在 ipad 上不使用图片并列功能
  .img-grid p {
    display: block;
  }

  .img-grid p img {
    max-width: 100% !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
  }
}


//  ------------------------------- 样式覆盖 -------------------------------
